iT邦幫忙

2022 iThome 鐵人賽

DAY 8
0
自我挑戰組

Asp.Net Core 零基礎建立自己的Blog系列 第 8

[Day 8] Asp.Net core MVC - Ckeditor5 圖片上傳(一)

  • 分享至 

  • xImage
  •  

上傳圖片是一大大大重點,一篇文章沒有圖片就沒有人想看了,一個教學文章如果沒有圖片上傳功能,也沒有意義。

目標:
1.上傳圖片

步驟:
step1.前端程式碼 (完整)

@section Styles {
<style>
    .ck-editor__editable {
        min-height: 500px;
    }
</style>
}

<form asp-controller="Article" asp-action="CreateArticle" method="post">
    <div class="form-group" style="width:700px;margin-right:auto;margin-left:auto;">

        <textarea name="Content" class="form-control" id="editor" rows="50"></textarea>

    </div>
    <button type="submit">Send</button>
</form>

    @section Scripts {

<script src="~/ckeditor7/build/ckeditor.js"></script>
<script>
    // ckEdit 5
    ClassicEditor
        .create(document.querySelector('#editor'), {
            removePlugins: [ 'ImageResize' ,'ImageStyle' ,'ImageToolbar' ],
            ckfinder: {
                uploadUrl: '/Article/Uploads'
            }
        })
        .catch(error => {
            console.error(error);
        });
</script>
}

1.這邊首先 先跟 ckeditor 綁定(所以會用jQuery選取器,選擇editor這個Id)。

querySelector('#editor') 綁定 <textarea name="Content"  id="editor">

2.在js程式碼這邊,加上uploadUrl 後面是圖片上傳的後端的路徑(就是下方程式碼)。

ckfinder: {
                uploadUrl: '/Article/Uploads'
            }

3.之後就是 post 回傳的路徑。

step2.後端程式碼,在Articlecontroller.cs 加上此function
那這邊會看到有 var obj = await _article.UploadImage(upload);
可以先註解掉(不然目前會出錯),因為這是真正處理、儲存圖片的地方。

public async Task<IActionResult> Uploads(IFormFile upload)
        {
            var obj = await _article.UploadImage(upload);

            return Json(new
            {
                uploaded = obj.Uploaded,
                fileName = obj.FileName,
                url = obj.Url,
                error = new
                {
                    message = obj.Msg
                }
            });
        }

今天只要能確定圖片有上傳到後端就好了,可以下中斷點看看。


上一篇
[Day 7] Asp.net core MVC Ckeditor5 安裝
下一篇
[Day 9] Asp.Net core MVC - Ckeditor5 圖片上傳(二)
系列文
Asp.Net Core 零基礎建立自己的Blog30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言